<template>
  <div class="wrapper">
    <div class="list" :style="{ display: !!collapse ? 'none' : 'block' }">
      <div class="item" v-for="item in getList" :key="item.key">
        <div class="process" :style="{ width: `${item.process}%` }"></div>
        <div class="content">
          <div class="left">
            <img src="@/assets/icons/icon-file.svg" />
          </div>
          <div class="middle">
            <div class="h1">{{ item.fileName }}</div>
            <div class="h2">{{ item.current }}/{{ item.total }}</div>
          </div>
          <div class="right">
            <a-icon
              :style="`fontSize: 24px;color: ${item.process == 100 ? '#52c41a' : '#1677FF'}`"
              :type="item.process == 100 ? 'check-circle' : 'sync'"
              :spin="item.process != 100"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '../vue-simple-uploader/js/bus'

export default {
  props: {
    list: Array
  },
  data () {
    return {
      collapse: false
    }
  },
  methods: {
    formatSize (limit) {
      var size = ''
      if (limit < 0.1 * 1024) {
        // 小于0.1KB，则转化成B
        size = limit.toFixed(2) + 'B'
      } else if (limit < 1 * 1024 * 1024) {
        // 小于0.1MB，则转化成KB
        size = (limit / 1024).toFixed(2) + 'KB'
      } else if (limit < 1 * 1024 * 1024 * 1024) {
        // 小于0.1GB，则转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + 'MB'
      } else {
        // 其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
      }

      var sizeStr = size + '' // 转成字符串
      var index = sizeStr.indexOf('.') // 获取小数点处的索引
      var dou = sizeStr.substr(index + 1, 2) // 获取小数点后两位的值
      if (dou == '00') {
        // 判断后两位是否为00，如果是则删除00
        return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
      }
      return size
    },
    initBus () {
      Bus.$on('changeCollapse', (val) => {
        this.collapse = val
        console.log('🚀 ~ file: UploadList.vue:64 ~ Bus.$on ~ this:', this)
      })
    }
  },
  mounted () {
    this.initBus()
  },
  computed: {
    getList () {
      return this.list
        .map((i) => {
          const current = this.formatSize(i.uploadSize)
          const total = this.formatSize(i.fileSize)
          return {
            ...i,
            current,
            total,
            process: parseInt((i.uploadSize / i.fileSize) * 100)
          }
        })
        .sort((a, b) => b.sort - a.sort)
    },
    getCollapse () {
      return this.collapse
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  max-height: 194px;
  overflow-y: scroll;
  margin-left: -24px;
  margin-right: -24px;
  &::-webkit-scrollbar {
    display: none;
  }
  .item {
    position: relative;
    .content {
      height: 64px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    .process {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: rgba(#1677ff, 0.08);
      width: 50%;
      height: 100%;
      transition: width 0.15s linear;
    }
    .left {
      flex-shrink: 0;
      width: 42px;
      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
    .middle {
      flex: 1;
      padding: 0 12px;
      .h1 {
        font-size: 14px;
        color: #333333;
      }
      .h2 {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
      }
    }
    .right {
      padding-right: 4px;
    }
  }
}
</style>
